<template>
    <div class="install">
        <div class="code-box" v-for="(item, index) in data" :key="index">
            <t class="t2">{{ item.title }}</t>
            <pre-code :code="item.code"></pre-code>
        </div>
        <div class="des-box">
            <a href="https://npmmirror.com/package/sibionics-ui-next" target="_blank"><i class="el-icon-view"></i>查看 sibionics-ui-next 所有版本</a>
            <br />
            <a href="https://gitee.com/bearsee/sibionics-ui-next-demo" target="_blank"><i class="el-icon-download"></i>下载 sibionics-ui-next 的演示demo</a>
        </div>
        <el-backtop target=".main-container"></el-backtop>
    </div>
</template>

<script>
export default {
    name: 'Install',
    data() {
        return {
            data: [
                {
                    title: 'npm安装',
                    code: 'npm i sibionics-ui-next -S',
                },
                {
                    title: 'yarn安装',
                    code: 'yarn add sibionics-ui-next',
                },
                {
                    title: '浏览器直接引入',
                    code: `<head>
    <!-- 引入 element-plus 样式 -->
    <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css"></link>
    <!-- 引入 sibionics-ui-next 样式 -->
    <link rel="stylesheet" href="//unpkg.com/sibionics-ui-next/lib/index.css"></link>
    <!-- 引入 Vue 3 -->
    <script src="//unpkg.com/vue@3"><\/script>
    <!-- 引入 element-plus -->
    <script src="//unpkg.com/element-plus"><\/script>
    <!-- 引入 element-plus 图标库 -->
    <script src="//unpkg.com/@element-plus/icons-vue"><\/script>
    <!-- 引入 sibionics-ui-next 组件库 -->
    <script src="//unpkg.com/sibionics-ui-next"><\/script>
</head>

<body>
    <div id="app">
        <sib-item v-model="value" :props="props"></sib-item>
    </div>
    <script>
        console.log(Vue);
        console.log(ElementPlus);
        console.log(ElementPlusIconsVue);
        console.log(sibui);
        
        const app = Vue.createApp({
            setup() {
                const props = Vue.reactive({
                    label: '输入框',
                    type: 'text',
                    prefixIcon: 'Search',
                });
                const value = Vue.ref('6666');
                
                return { props, value };
            },
        });

        // 注册 ElementPlus 图标组件
        Object.keys(ElementPlusIconsVue).forEach((key) => app.component(key, ElementPlusIconsVue[key]));
        app.use(ElementPlus).use(sibui).mount('#app');
    <\/script>
</body>
                    `,
                },
            ],
        };
    },
};
</script>

<style lang="scss">

.install {
  .code-box {
    padding: 15px 0;
  }
  .des-box a {
    font-weight: 500;
    font-size: 15px;
    color: var(--el-color-primary);
    padding-bottom: 50px;
  }
}
</style>
